<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <div th:replace="header :: commonheader"></div>
</head>
<body>
<div th:replace="header :: commonnav"></div>


<div id="videoDom" class="main-page-box" v-cloak>
    <div id="bannerModule">
        <div class="homeSlide">
            <ul class="slides">
                <li><img src="https://file.xatianzhou.com/images/pagebanner/1634108280692775.jpg"></li>
            </ul>
        </div>
        <!--    <div class="bm_tc"></div>-->
    </div>

<!--    <div class="yunu-sou" style="display: block">-->
<!--        <div class="container clearfix">-->
<!--            <div class="hot"> <strong>本页关键词：</strong>-->

<!--                陕西西安矿石化验,选矿实验,矿山设计,矿山承包,选矿厂承包,岩矿鉴定,矿权交易-->

<!--            </div>-->
<!--        </div>-->
<!--    </div>-->

    <div class="aboutcontain3">
        <div class="abouttop">

            <div class="abouttopnall">
                <div class="abouttopnwai">
                    <div class="abouttopn">视频展示</div>
                </div>
                <div class="mianbao">
                    <a href="/">首页</a> &gt;&gt; <a href="/video/">视频展示</a>
                </div>
            </div>
        </div>
    </div>

    <div class="aboutcontain3">
        <div class="abouttop abouttop3" style="margin-top:20px;position: relative;">
            <div class="column_list video" style="margin-top: 30px;" :loading="listLoading">

                <dl class="dl_temp dl_temp_w387">
                    <dd class="d_img" style="height:293px;">
                        <a target="_blank" th:href="${'/video/'+articletop.id+'.html'}">
                            <img style="border-radius: 0px;" th:src="${articletop.thumb+'?x-oss-process=image/resize,m_fill,h_415,w_487'}" th:alt="${articletop.title}"> </a>
                    </dd>
                    <dt class="d_tit daxiao">
                        <a target="_blank" th:href="${'/video/'+articletop.id+'.html'}" th:text="${articletop.title}"></a>
                    </dt>
                </dl>

                <dl class="dl_temp" v-for="(item,index) in articleList" :key="'video_'+index">
                    <div style="width: 100%;text-align: center;">
                        <dd class="d_img"  style="margin-left: 0px;">
                            <a target="_blank" :href="'/video/'+item.id+'.html'"><img style="border-radius: 0px;" :src="item.thumb+'?x-oss-process=image/resize,m_fill,h_215,w_287'" :alt="item.title" width="210" height="117"></a>
                        </dd>
                    </div>
                    <dt class="d_tit"><a target="_blank" :href="'/video/'+item.id+'.html'">{% item.title %}</a></dt>
                </dl>
            </div>
        </div>

    </div>
    <div style="width: 50%;margin: 0 auto;">

        <el-pagination
                style="text-align: center;"
                @current-change="handleCurrentChange"
                :page-size="page_size"
                layout="prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>

</div>

<script>
    new Vue({
        el: '#videoDom',
        data: {
            page:1,
            listLoading:false,
            articleList:[],
            page_size: 20,
            total:0
        },
        created(){
            this.getData()
        },
        methods: {
            handleCurrentChange(e){
                this.page = e
                this.getData()
            },
            getData(){
                let that = this
                that.listLoading = true
                $.ajax({
                    type: "GET",
                    dataType:"json",
                    data:{page:that.page,page_size:that.page_size,columnid:13},
                    async:true,
                    url:'/get_video_page_list',
                    success: function (res) {
                        that.listLoading = false
                        let da = res.data
                        that.total = da.total
                        that.articleList = da.data
                    },
                    error:function (err) {
                        console.log("这是请求失败的");
                    }
                });
            }
        },
        delimiters: ['{%', '%}'],
    })

</script>
<div th:replace="footer :: commonfooter"></div>
</body>
</html>